<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> DO </title>

	<!-- 引用css -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
	<!-- 引用js -->
    <script type="text/javascript" src="../jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/drag.js"></script>
	
	<script>
		$(function(){
			$('.box-1 dl').each(function(){
				$(this).dragging({
					move : 'x',
					randomPosition : true
				});
			});
			$('.box-2 dl').each(function(){
				$(this).dragging({
					move : 'y',
					randomPosition : true
				});
			});
			$('.box-3 dl').each(function(){
				$(this).dragging({
					move : 'both',
					randomPosition : false
				});
			});
			$('.box-4 dl').each(function(){
				$(this).dragging({
					move : 'both',
					randomPosition : true
				});
			});
		});
	</script>
 </head>
 <body>
	<p>只能水平拖动</p>
	<div class='box box-1'>
		<dl><img src="img/01.jpg" width=150 height=150></dl>
	</div>
	<p>只能垂直拖动</p>
	<div class='box box-2'>
		<dl><img src="img/02.jpg" width=150 height=150></dl>
	</div>
	<p>自由拖动，初始位置固定</p>
	<div class='box box-3'>
		<dl><img src="img/03.jpg" width=150 height=150></dl>
	</div>
	<p>自动拖动，初始位置随机</p>
	<div class='box box-4'>
		<dl><img src="img/04.jpg" width=150 height=150></dl>
		<dl><img src="img/05.jpg" width=150 height=150></dl>
		<dl><img src="img/06.jpg" width=150 height=150></dl>
		<dl><img src="img/07.jpg" width=150 height=150></dl>
	</div>
 </body>
 </html>